<template>
  <div class="wrap">
    <div class="w100 haed bbg">
      <img
        class="fl hpd pa"
        style="height: 40rem; left: 20rem; top: 7rem"
        src="@/assets/img/back.png"
        @click="back"
      />
      <p class="fz37 cfff hpd tc">用户资料</p>
    </div>
    <div class="p20 main">
      <el-card class="box-card content">
        <div>
          <span>负责人：</span>
          <span>{{businessInfo.principal}}</span>
        </div>
        <div>
          <span>身份证号码：</span>
          <span>{{businessInfo.idnum}}</span>
        </div>
        <div>
          <span>手机号：</span>
          <span>{{businessInfo.tel}}</span>
        </div>
        <div>
          <span>店名：</span>
          <span>{{businessInfo.name}}</span>
        </div>
        <div>
          <span>工商营业执照号码：</span>
          <span>{{businessInfo.license}}</span>
        </div>
        <div>
          <span>经营区域：</span>
          <span>{{businessInfo.location | getLocation}}</span>
        </div>
        <div>
          <span>地址：</span>
          <span>{{businessInfo.address}}</span>
        </div>
      </el-card>
      <el-card class="box-card">
        <p>商家简介</p>
        <p class="f20 mt20" style="line-height: 40rem">
          {{businessInfo.introduce}}
        </p>
      </el-card>
      <el-card class="box-card">
        <p>身份证正反面照片</p>
        <div>
          <img :src="businessInfo.idPictureFront"/>
          <img :src="businessInfo.idPictureBack"/>
        </div>
      </el-card>
      <el-card class="box-card">
        <span>营业执照</span>
        <div>
          <img :src="businessInfo.licensePicture" />
        </div>
      </el-card>
      <el-card class="box-card">
        <span>门店照片</span>
        <div>
          <img :src="businessInfo.gatePicture" />
        </div>
      </el-card>
      <div class="btn mt50">
        <button @click="toEdit" class="bbg">修改</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getBusinessById } from "@/api/index";

export default {
  data() {
    return {
      businessInfo:{}
    };
  },
  filters:{
    getLocation(val){
      switch(val){
        case '1':
          return '商丘';
        case '2':
          return '焦作';
        case '3':
          return '郑州';
        case '4':
          return '周口';
        case '5':
          return '信阳';
      }
      
    }
  },
  methods: {
    toEdit() {
      this.$router.push("/messageEdit");
    },
    back(){
      this.$router.back();
    }
  },
  mounted(){
    const id = JSON.parse(localStorage.getItem("ID")) ;
    getBusinessById({id:id}).then(r=>{
      this.businessInfo = r.data;
    })
  }
};
</script>

<style scoped>
.wrap {font-size: 24rem;margin-bottom: 90rem;}
.main{margin-top: -300rem;}
.el-card{border-radius: 15rem;margin-bottom: 15rem;}
.content>.el-card__body>div{display: flex;flex-direction: row;justify-content: space-between;line-height: 70rem;}
.box-card img{width: 190rem;height: 190rem;margin-right: 10rem;margin-top: 10rem;}
.btn{padding:0 50rem;}
button{width: 100%;height: 60rem;font-size: 24rem;color:#FFFFFF;border: none;border-radius: 50rem;}
</style>